<template>
  <Layout
    :bgColor="'background: linear-gradient(to bottom, #fff, #b8e2fa);'"
    :tab-id="0"
  >
    <template #content>
      <view
        class="h-[100vh] w-[100vw] bg-gradient-to-b from-[#fff] to-[#eaf0fc]"
      >
        <view class="mt-2 w-[80%] m-auto flex justify-between items-center">
          <view class="flex items-center" @click="toLogin">
            <image
              class="w-[60rpx] h-[60rpx]"
              src="../../static/icons/home.png"
              mode="scaleToFill"
            />
            <view class="ml-3">
              <view class="text-[38rpx]">{{ house_name }}</view>
              <view class="text-[28rpx] text-[#7d7e80] mt-1">{{
                dayjs().format('YYYY-MM-DD')
              }}</view>
            </view>
          </view>
          <image
            class="w-[60rpx] h-[60rpx]"
            src="../../static/icons/phone-call.png"
            mode="scaleToFill"
            @click="toContact"
          />
        </view>
        <view class="w-[86%] m-auto mt-12 flex flex-col">
          <text class="font-sans text-[24px] md:text-[26px] font-black"
            >Hi 你好</text
          >
          <text class="font-sans text-[16px] md:text-[18px] text-[#7d7e80] mt-4"
            >最新公告</text
          >
          <view class="mt-4 rounded">
            <Marquee :speed="40">
              <view class="item p-2" v-for="item in noticeList" :key="item.id">
                <view
                  class="w-[500rpx] h-[300rpx] shadow-[0_6px_12px_rgba(0,0,0,0.1)] rounded-[10rpx] p-2 font-sans font-normal leading-[1.5]"
                >
                  <text class="text-[36rpx] text-[18px] md:text-[20px] mx-1">{{
                    item.title
                  }}</text>
                  <view class="w-[100%] mt-2">
                    <text
                      class="whitespace-pre-wrap break-words text-[14px] md:text-[16px]"
                      >{{ item.content }}</text
                    >
                    <view class="flex justify-between items-center mt-2">
                      <text class="text-[24rpx]">{{ item.publisher }}</text>
                      <text class="text-[18rpx] text-[#7d7e80]">{{
                        item.announcement_time
                      }}</text>
                    </view>
                  </view>
                </view>
              </view>
            </Marquee>
          </view>
        </view>
        <view class="w-[90%] m-auto mt-6">
          <text class="font-sans text-[16px] md:text-[18px] text-[#7d7e80] mt-4"
            >服务</text
          >
          <view class="w-[100%] flex justify-between items-center mt-4">
            <view
              class="w-[25%] flex flex-col items-center"
              v-for="item in serviceList"
              :key="item.name"
              @click="toService(item)"
            >
              <image
                class="img-shadow w-[90rpx] h-[90rpx] rounded-[50%]"
                :src="item.icon"
                mode="scaleToFill"
              />
              <text class="text-[20rpx] mt-2">{{ item.name }}</text>
            </view>
          </view>
          <view
            class="flex items-center justify-start rounded-[20rpx] mt-12 px-3 py-5 shadow-[0_6px_12px_rgba(0,0,0,0.1)]"
            @click="
              toService({ name: '物业缴费', path: '/pages/service/costList' })
            "
          >
            <image
              src="../../static/icons/notebook.png"
              mode="scaleToFill"
              class="w-[120rpx] h-[120rpx]"
            />
            <view class="flex flex-col ml-1">
              <text class="mb-2">物业缴费</text>
              <text class="text-[18rpx] text-[#7d7e80]"
                >点我查看你的物业费用信息，并进行缴纳</text
              >
            </view>
          </view>
        </view>
      </view>
    </template>
  </Layout>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import Layout from '@/components/Layout/tabLayout.vue'
import Marquee from '@/components/Carsoule/MarqueeIndex.vue'
import { jumpTo } from '@/utils/unifunc'
import { getNotice } from '@/api/hom'
import { getDefualt } from '@/api/contact'

import dayjs from 'dayjs'

const contact = ref<IContact>()

const house_name =
  uni.getStorageSync('house_name')?.name || '暂无房号，快去绑定吧'

const noticeList = ref<Announcement[]>([])

const serviceList = [
  {
    name: '投诉',
    icon: '../../static/icons/bad-review.png',
    path: '/pages/complaint/complaintPage'
  },
  {
    name: '维修',
    icon: '../../static/icons/wrench.png',
    path: '/pages/service/repiarPage'
  },
  {
    name: '车位',
    icon: '../../static/icons/p.png',
    path: '/pages/service/carPlace'
  },
  {
    name: 'AI',
    icon: '../../static/icons/ai.png',
    path: '/pages/llm/llmPage'
  }
]

function toService(item: any) {
  if (item.path) {
    jumpTo(item.path)
  }
}

function toLogin() {
  uni.navigateTo({
    url: '/pages/index/loginPage'
  })
}

function toContact() {
  const phone = contact.value?.phone || '13800000000'
  uni.makePhoneCall({
    phoneNumber: phone
  })
}

onMounted(() => {
  getNotice<any, Announcement>({
    page: 1,
    pageSize: 10
  }).then((res) => {
    noticeList.value = res.data.items || []
  })
  getDefualt<any, IContact>({
    id: 1
  }).then((res) => {
    if (res.data) {
      contact.value = res.data
    }
  })
})
</script>

<style lang="scss" scoped>
.item {
  display: inline-block;
  margin-right: 50px;
  font-size: 16px;
  color: #333;
}
</style>
